<template>
	<view class="content">
		<view class="cont">
			<view class="contkk">
				<view class="kkline">
				  <view class="kklineLeft">
					<span>姓名</span>
				  </view>
				  <view class="kklineRight">
					  <input type="text" placeholder="请输入收货人姓名" v-model="receivePersonName" class="rightinput">
				  </view>
				</view>
				<view class="kkline">
				  <view class="kklineLeft">
					<span>手机号</span>
				  </view>
				  <view class="kklineRight">
					  <input type="text" maxlength="11" placeholder="请输入收货人手机号" v-model="receivePhone" class="rightinput">
				  </view>
				</view>
				<view class="kkline">
				  <view class="kklineLeft">
					<span>所在地区</span>
				  </view>
				  <view class="kklineRight" @click="open">
					  {{city}}
				  </view>
				</view>
				<!-- 配置 -->
				<view v-if="cardExchangeMode==2">
					<view class="kkline2">
						<view class="kklineLeft">选择配置({{toChineseNumber(this.cardConfig.length)}}选一)</view>
						<view class="peizline">
							<radio-group @change="pzradioChange">
								<label v-for="(item,index) in cardConfig"  class="uni-list-cell uni-list-cell-pd" key="2"  style="display: flex;align-items: center;padding-top: 16rpx;">
									<view>
										<radio :value="item.label"  style="transform: scale(0.7);"/>
									</view>
									<view class="radioTxt2" >{{item.label}}配置:{{item.value}}</view>
								</label>
								
							</radio-group>
						</view>
					</view>
				</view>
				
				<!-- 配置 -->
				<view class="kkline2 " >
					<view class="kklineLeft">详细地址</view>
					<input type="text" v-model="receiveAddress" placeholder="请输入详细地址" class="beizInput" placeholder-style="color:#cccccc;">
				</view>
				<view class="" v-if="cardExchangeMode==1">
					<view class="kkline3">
						<view class="kklineLeft" >发货类型</view>
						<view class="redioBox">
							<!-- <view class="tuijian" v-if="orderType==1"></view> -->
							<radio-group @change="radioChange" v-model="type" style="display: flex;align-items: center;" >
								<label v-if="cardTypeName!='MNC'" class="uni-list-cell uni-list-cell-pd" key="1" style="display: flex;align-items: center;;">
									<view>
										<radio value="1"  :checked="type==1" style="transform: scale(0.7);"/>
									</view>
									<view class="sydBox">
										<view class="radioTxt" >随心兑 更新鲜</view>
										<image src="../../static/img/tj.png" mode="" class="tjImg"></image>
									</view>
									
								</label>
								<label v-if="zhouqiShow" class="uni-list-cell uni-list-cell-pd" key="2"  style="display: flex;padding-left: 50rpx;align-items: center;">
									<view>
										<radio value="2" :checked="type==2" style="transform: scale(0.7);"/>
									</view>
									<view class="radioTxt" >周期发货</view>
								</label>
							</radio-group>
						</view>
					</view>
					<view class="wxts" v-if="type==1">
						温馨提示：随心兑可以任意选择发货数量、时间、收货地址，下次兑换相同操作即可
					</view>
					<view class="kkline" v-if="type==2">
					  <view class="kklineLeft">
						<span>每月发货日期</span>
					  </view>
					  <view class="kklineRight" >
						 <picker mode="selector" :range='rangeArr'  @change="binddayChange">
							<view class="kklineRightDate">{{day?day:'请选择'}}</view>
						</picker>
					  </view>
					</view>
					 <view class="kkline " >
					 	<view class="kklineLeft" v-if="type==1">兑换数量(盒)</view>
					 	<view class="kklineLeft" v-if="type==2">周期发货数量(盒)</view>
					 	<!-- <view class="kklineRight">
					 		<input type="number" @input="orderNum=orderNum.replace(/^(0+)|[^\d]+/g,'')"  v-model="orderNum" placeholder="请输入数量" class="rightinput" placeholder-style="color:#cccccc;">
					 	</view> -->
					 	<view class="kklineRight" v-if="cardTypeName!='MNC'">
					 		 <picker mode="selector" :range='ckNumArr'  @change="bindorderNumChange">
					 			<view class="kklineRightDate">{{orderNum?orderNum:'请选择'}}</view>
					 		</picker>
					 	</view>
						<view class="kklineRight" v-else>
							<view class="kklineRightDate">{{orderNum}}</view>
						</view>
					 </view>
				</view>
				
				
				
				<view class="kkline" v-if="type==1">
				  <view class="kklineLeft">
					<span>期望发货日期</span>
				  </view>
				  <view class="kklineRight" v-if="!szx">
					 <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="kklineRightDate">{{date?date:'请选择'}}</view>
					</picker>
				  </view>
				  <view class="kklineRight" v-if="szx">
					 <picker mode="date" :value="date" :start="szxTime1" :end="szxTime2" @change="bindDateChange">
						<view class="kklineRightDate">{{date?date:'请选择'}}</view>
					</picker>
				  </view>
				</view>
			</view>
			<view class="SubmitBtnBOx">
				<view class="SubmitBtn" @click="submitBtn">立即兑换</view>
			</view>
		</view>
		<view>
			
			<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible"/>
			
		</view>
	</view>
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	export default {
		 components: {
		        cityPicker
		},
		data() {
			return {
				visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '370102',
				// defaultValue: ['河北省','唐山市','丰南区'],
				column: 3,
				receivePersonName:'',
				receivePhone:'',
				city:'请选择',
				adress:'',
				date:'',
				startDate:'',
				endDate:'',
				type:1,
				rangeArr:[],
				day:'',
				cardId:'',
				cardExchangeMode:'',
				cardExchangeTotal:'',
				receiveProvince:'',
				receiveCity:'',
				receiveCounty:'',
				receiveAddress:'',
				orderNum:'',
				orderType:'',
				expectSendTime:'',
				receiveAddress:'',
				orderId:'',
				cardExchangeUseTotal:'',
				ckNumArr:[],
				zhouqiShow:false,
				cardTypeName:'',
				szx:false,
				szxTime1:'',
				szxTime2:'',
				cardConfig:'',
				orderConf:'',
			}
		},
		onLoad(opt) {
			this.cardId=opt.cardId
			//this.orderType=opt.cardExchangeMode
			this.cardExchangeMode=opt.cardExchangeMode
			this.cardExchangeTotal=opt.cardExchangeTotal
			this.cardExchangeUseTotal = opt.cardExchangeUseTotal
			this.orderType=opt.orderType
			this.cardTypeName=opt.cardTypeName
			
			if(this.cardExchangeMode==1){
				/* if(this.orderType==0){
					
				}else{
					this.zhouqiShow=true;
				} */
				var orderTypeNum=Number(this.orderType)
				if(orderTypeNum>0){
					
				}else{
					this.zhouqiShow=true;
				}
				if(this.cardTypeName=='MNC'){
					this.orderNum=1
					this.type=2
				}
				
				
			}
			if(this.cardExchangeMode==0){
				this.orderNum=this.cardExchangeTotal
				this.orderType=2
				
			}
			//带配置的单词卡
			if(this.cardExchangeMode==2){
				this.orderNum=this.cardExchangeTotal
				this.orderType=2
				var cardConfig= uni.getStorageSync("cardConfig");
				this.cardConfig=JSON.parse(cardConfig)
				console.log(this.cardConfig)
			}
			const currentDate = new Date();
			var year = currentDate.getFullYear();
			if(this.cardTypeName=='SZX'){
				this.szx=true
				this.szxTime1=year+'-09-25'
				this.szxTime2=year+'-12-31'
				console.log(this.szxTime1)
			}
            var num=29;
		    for(var i = 1; i < num; i++){
			this.rangeArr.push(i)
			}
			
			
			var month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
			var day = currentDate.getDate();
			if(month < 10){
				month='0'+month
			}
			this.startDate=year+'-'+month+'-'+day
			//console.log(this.startDate)
			
				var ckNum=this.cardExchangeTotal
				
				if(this.cardExchangeUseTotal&&this.cardExchangeUseTotal!='null'){
					ckNum= ckNum - this.cardExchangeUseTotal
				}
				
				for(var i = 1; i < Number(ckNum)+1; i++){
				   this.ckNumArr.push(i)
				}
				console.log(this.ckNumArr)
			
			
				
			
		},
		watch:{
			orderNum(newName, oldName){
			
				
			}
		},
		methods: {
			pzradioChange(e){
				//console.log(e)
				var obj=this.cardConfig.find(item => item.label === e.detail.value);
				//console.log(obj)
				this.orderConf=obj
			},
			binddayChange(e){
			   console.log(e)
				   this.day=this.rangeArr[e.detail.value]+'号'
				   this.receiveTime=this.rangeArr[e.detail.value]
			},
			bindorderNumChange(e){
				this.orderNum=this.ckNumArr[e.detail.value]
			},
		  submitBtn(){
			  
			  //console.log(typeof(this.date))
			  if(!this.receivePersonName){
				  uni.showToast({
				  	 title: '请输入姓名',
				  	 icon:'none',
				  	 duration: 3000
				  });
				  return false
			  }
			  if(!this.receivePhone){
				  uni.showToast({
					 title: '请输入手机号',
					 icon:'none',
					 duration: 3000
				  });
				  return false
			  }
			 var reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
			 if(reg.test(this.receivePhone) == false ){
			     console.log("手机号码格式不正确");
			      uni.showToast({
			      	title: '请输入正确的手机号',
			      	icon: 'none',
			      	duration: 3000
			      });
			      return false;   
			 }
			  if(!this.city){
				  uni.showToast({
					 title: '请输入选择城市',
					 icon:'none',
					 duration: 3000
				  });
				  return false
			  }
			  if(!this.receiveAddress){
				   uni.showToast({
					 title: '请输入详细地址',
					 icon:'none',
					 duration: 3000
				   });
				   return false
			  }
			  if(!this.orderNum){
				  uni.showToast({
					 title: '请输入兑换数量',
					 icon:'none',
					 duration: 3000
				  });
				  return false
			  }
			  var total=this.cardExchangeTotal
			   if(this.cardExchangeUseTotal&&this.cardExchangeUseTotal!='null'){
			  		 total=this.cardExchangeTotal - this.cardExchangeUseTotal
			   }
			  
			   console.log(total)
			  // return false
			   if(this.orderNum>total){
					  uni.showToast({
						 title: '兑换数量大于卡数量',
						 icon:'none',
						 duration: 3000
					  });
					  return false
			   }
			  if(this.type==1){
				  if(!this.date){
					  uni.showToast({
						 title: '请选择期望发货日期',
						 icon:'none',
						 duration: 3000
					  });
					  return false
				  }
				 
			  }else{
				  if(!this.day){
					  uni.showToast({
						 title: '请选择每月发货日期',
						 icon:'none',
						 duration: 3000
					  });
					  return false
				  }
				  this.date=''
				  
			  }
			  if(this.cardExchangeMode==1){
				  if(this.type==1){
				  		this.orderType=0
				  }else{
				  		this.orderType=1
				  }
			  }
			  uni.showLoading({
			   	title: '加载中'
			  }); 
			  var params={
				  receivePersonName:this.receivePersonName,
				  receivePhone:this.receivePhone,
				  receiveNum:this.orderNum,
				  receiveProvince:this.receiveProvince,
				  receiveCity:this.receiveCity,
				  receiveCounty:this.receiveCounty,
				  receiveAddress:this.receiveAddress,
				  orderType:this.orderType,
				  cardId:this.cardId,
				  expectSendTime:this.date,
				  receiveTime:this.receiveTime
			  }
			  if(this.cardExchangeMode==2){
				  if(this.orderConf==''){
					  uni.showToast({
					  	 title: "请先选择配置",
					  	 icon:'none',
					  	 duration: 3000
					  });
					 return false;
				  }
				 params.orderConf=JSON.stringify(this.orderConf)
			  }
			  this.$http('delivery/cardOrders',params,'POST').then(res => {
			  	   uni.hideLoading();
			  	   
			  		if(!res.data){
			  			uni.showToast({
			  				 title: res.msg,
			  				 icon:'none',
			  				 duration: 3000
			  			});
			  		}else{
						uni.redirectTo({
							url:'success?orderId='+res.data.orderId
						}) 
			  			/* uni.navigateTo({
			  				url: 'confirm?cardId='+res.data.cardId+'&cardExchangeMode='+res.data.cardType.cardExchangeMode+'&cardExchangeTotal='+res.data.cardType.cardExchangeTotal
			  			}); */ 
			  		}
			   })
			  
			
		  },
		  radioChange(e){
			  console.log(e)
			  this.type=e.detail.value
			  if(this.type==2){
				  
			  }
		  },
		  bindDateChange(e){
			  console.log(e)
			  this.date=e.detail.value
		  },
          open () {
			  this.visible = true
		  },
		  confirm (val) {
			  console.log(val)
			  this.receiveProvince=val.provinceName;
			  this.receiveCity=val.cityName;
			  this.receiveCounty=val.areaName;
			 // this.str = JSON.stringify(val)
			  this.city=val.name
			  this.visible = false
		  },
		  cancel () {
			  this.visible = false
		  },
		   toChineseNumber(n) {
		    // 检查输入是否为自然数
		    if (!Number.isInteger(n) && n < 0) {
		      throw Error('请输入自然数')
		    }
		    // 定义中文数字和位置的数组
		    const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
		    const positions = ['', '十', '百', '千', '万', '十万', '百万', '千万', '亿', '十亿', '百亿', '千亿']
		    // 将输入数字转换为字符串并拆分为字符数组
		    const charArray = String(n).split('')
		    let result = '' // 存储最终结果的变量
		    let prevIsZero = false // 用于标记前一个字符是否为零
		    // 处理0 
		    for (let i = 0; i < charArray.length; i++) {
		      const ch = charArray[i] // 获取当前字符
		      if (ch !== '0' && !prevIsZero) {
		        // 如果当前字符不是零且前一个字符也不是零，则将中文数字和位置添加到结果中
		        result += digits[parseInt(ch)] + positions[charArray.length - i - 1]
		      } else if (ch === '0') {
		        // 如果当前字符是零，则标记前一个字符为零
		        prevIsZero = true
		      } else if (ch !== '0' && prevIsZero) {
		        // 如果当前字符不是零且前一个字符是零，则添加零和中文数字和位置到结果中
		        result += '零' + digits[parseInt(ch)] + positions[charArray.length - i - 1]
		        prevIsZero = false
		      }
		    }
		    // 处理十
		    if (n < 100) {
		      // 如果输入数字小于100，则将结果中的“一十”替换为“十”
		      result = result.replace('一十', '十')
		    }
		    return result // 返回最终结果
		  },
		}
	}
</script>

<style scoped>
.redioBox{
	position: relative;
	
}
.radioTxt{
	font-size: 28rpx;
	    white-space: nowrap;
}
.radioTxt2{
	font-size: 26rpx;
}
.peizline{
	padding-top: 10rpx;
}
.tuijian{
	position: absolute;
	background: url('../../static/img/tj.png') no-repeat;
	background-size: 100% 100%;
	color: #FFFFFF;
	font-size: 22rpx;
	top: -18rpx;
	left: 240rpx;
	width: 45rpx;
	height: 45rpx;
	
}
.tjImg{
	width: 45rpx;
	height: 45rpx;
	margin-top: -20rpx;
}
.sydBox{
	display: flex;
}
	.cont{
		padding: 24rpx;
	}
	.contkk{
		background: #ffffff;
		border-radius: 10rpx;
		padding: 0 20rpx;
	}
	.kkline{
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1px solid #EEEEEE;
		color: #666666;
		font-size: 28rpx;
		justify-content: space-between;
	}
	.kkline2{
		padding: 30rpx 0;
		border-bottom: 1px solid #EEEEEE;
		color: #666666;
		font-size: 28rpx;
	}
	.kkline3{
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1px solid #EEEEEE;
		color: #666666;
		font-size: 28rpx;
	}
	.kklineRight{
		color: #3c3c3c;
		font-size: 28rpx;
		
		width: 450rpx;
	/* 	text-align: right; */
	}
	.kklineLeft {
		width: 220rpx;
	}
	.bzline{
		display: flex;padding: 30rpx 0;
	}
	.beizInput{
		width: 600rpx;font-size: 28rpx;
		margin-top: 20rpx;
	}
	.rightinput{
		font-size: 28rpx;
	}
	.SubmitBtn{
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		background: #D53533;
		color: #fff;
		margin-top: 50rpx;
		border-radius: 10rpx;
	}
	.SubmitBtnBOx{
		padding: 20rpx;
	}
	.wxts{
		font-size: 26rpx;
		color: #999;
		padding: 15rpx 0;
		    border-bottom: 1px solid #EEEEEE;
	}
</style>
